<template>
  <view>
    <!--    搜索-->
    <view class="mb-3 m-2">
      <u-search placeholder="请输入关键字" :show-action="false" v-model="keyword">
        <template v-slot:left>
          <view class="flex align-center m-1 p-1" @click="toCityList">
            <text class="font">{{ city }}</text>
            <uni-icons class="ml-1" type="down" size="15" color="#bdbdbd"></uni-icons>
            <view class="line-sm mx-2"></view>
          </view>
        </template>
      </u-search>
    </view>
    <view class="flex justify-between">
<!--      left-->
      <view class="flex flex-column rounded-right" style="background:#f3f3f5;">
        <scroll-view :scroll-y="true" :show-scrollbar="true" style="height: 77vh;">
          <view class="flex flex-column align-center m-3 mb-0" v-for="(item, index) in list" :key="index">
            <view class="font-md font-weight-bold mb-2">{{ item.title }}</view>
            <text class="font-sm py-2" v-for="(item2, index2) in item.childrens" :key="index2" @click="change(index2)">{{ item2.name }}</text>
<!--            <text class="font-sm py-2 active" >{{ item2.name }}</text>-->
<!--            <view class="text-down-line"></view>-->
          </view>
        </scroll-view>
      </view>
<!--      right-->
      <view class="flex-1 mx-3">
        <scroll-view :scroll-y="true" :show-scrollbar="true" style="height: 77vh;">
          <template v-for="item in list">
            <view class="flex flex-column" v-for="(item1, index1) in item.childrens" >
              <view class="font font-weight-bold">{{ item1.name }}</view>
              <view class="flex flex-wrap align-center">
                <view class="flex flex-column justify-center align-center mx-1 mt-2" v-for="(item2, index2) in item1.desc" >
                  <image class="rounded-lg" style="width: 140rpx;height: 140rpx;" :src="item2.img"></image>
                  <text class="font-sm py-2">{{ item2.name }}</text>
                </view>
              </view>
            </view>
          </template>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      city: '',
      list: [
        {
          title: '家电维修',
          childrens: [
            {
              name: '常用家电',
              desc: [
                {
                  img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942870317.jpg',
                  name: '洗衣机维修'
                },
                {
                  img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942870317.jpg',
                  name: '洗衣机维修'
                },
                {
                  img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942870317.jpg',
                  name: '洗衣机维修'
                },
                {
                  img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942870317.jpg',
                  name: '洗衣机维修'
                },
              ]
            },{
              name: '1',
              desc: [
                {
                  img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942870317.jpg',
                  name: '1'
                }
              ]
            },{
              name: '2',
              desc: [
                {
                  img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942870317.jpg',
                  name: '2'
                }
              ]
            },
          ]
        },
        {
          title: '家电维修',
          childrens: [
            {
              name: '常用家电',
              desc: [
                {
                  img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942870317.jpg',
                  name: '洗衣机维修'
                },
                {
                  img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942870317.jpg',
                  name: '洗衣机维修'
                },
                {
                  img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942870317.jpg',
                  name: '洗衣机维修'
                },
                {
                  img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942870317.jpg',
                  name: '洗衣机维修'
                },
              ]
            },{
              name: '1',
              desc: [
                {
                  img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942870317.jpg',
                  name: '1'
                }
              ]
            },{
              name: '2',
              desc: [
                {
                  img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942870317.jpg',
                  name: '2'
                }
              ]
            },
          ]
        }
      ],
    }
  },

  onShow() {
    this.city = uni.getStorageSync('city')
  },
  methods: {
    toCityList() {
      uni.navigateTo({
        url: '/pages/city_list/city_list'
      })
    },
    change(index) {
      console.log('选项改变：', index)
      this.value = index;
    }
  }
}
</script>

<style lang="scss" scoped>
.line-sm {
  border: 1rpx solid #bebebe;
  height: 30rpx;
}

.active {
  color: #2f80ff;
  font-weight: 600;
}
.text-down-line {
  border: 2px solid #2f80ff;
  margin-top: -6px;
  width: 10px;
}
</style>
